<template>
  <div>test---{{sum}}</div>
 <button @click="add">增加sum</button>
</template>

<script lang="ts">
   export default {
       name: 'test',
   }
</script>

<script setup lang="ts">
import { ref,  onMounted, onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'
let sum=ref(0)
function add(){
  sum.value +=1 
}

console.log('创建阶段')

onBeforeMount(()=>{
  console.log('before mounted')
})
onMounted(()=>{
  console.log('mounted')
})
onBeforeUpdate(()=>{
  console.log('before update')
})
onUpdated(()=>{
  console.log('updated')
})

onBeforeUnmount(()=>{
  console.log('before unmounted')
})
onUnmounted(()=>{
  console.log('unmounted')
})

</script>
<style scoped lang="less">

</style>